/*  header-comment
/*  file   : /Users/arida/react-hrm-h5/src/modules/todoList/index
/*  author : arida
/*  date   : 2017-6-4 18:24:40
/*  last   : 2017-9-6 18:18:3
*/
import React, { Component } from "react";
import PropTypes from "prop-types";

import autobind from "autobind-decorator";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";

// components
import Collapse from "./collapse";
import RangePicker from "./rangePicker";

// actions
import { fetchList } from "../../actions/todoList/";

// utils
import { setTitle, setRight, openLink } from "../../utils/dingtalk.js";
import moment from "../../utils/moment.js";
import R from "../../utils/ramda.js";
import { replaceSearch } from "../../utils/common.js";
import isWangDing from "../../utils/isWangDing";

// less
import "./todoList.less";

function showCollapse(number) {
  // 默认展示
  if (R.isNil(number)) return false;
  // 没有数据不展示
  if (number === 0 || number === "0") return false;
  // 有数据展示
  return true;
}

function showNoResult(list) {
  return !(
    Number(list.entryTotalNum || 0) +
    Number(list.dismissionTotalNum || 0) +
    Number(list.regularTotalNum || 0) +
    Number(list.transferTotalNum || 0)
  );
}

//将store注入组件的props
const mapStateToProps = state => ({
  todo: state.TODOLIST_LIST
});
//将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
  //区分绑定到props的action与传递的props
  actions: bindActionCreators(
    {
      dispatch,
      fetchList
    },
    dispatch
  )
});

@connect(mapStateToProps, mapDispatchToProps)
class TodoList extends Component {
  //constructor 非必需
  //默认props
  //获取dom节点的方法 ref={e =>{this.content = e}}>
  static defaultProps = {
    todo: {
      list: {}
    }
  };
  //propTypes 验证
  static propTypes = {
    todo: PropTypes.object,

    actions: PropTypes.shape({
      dispatch: PropTypes.func.isRequired,
      fetchList: PropTypes.func.isRequired
    }).isRequired
  };
  constructor(props) {
    super(props);
    this.state = {
      pickedDate: new Date()
    };
    setTitle({
      title: "待办事项"
    });
    setRight({ show: false });
    window._rlog(`_todoList`);
  }

  componentDidMount() {
    this.props.actions.fetchList();
  }

  @autobind
  onPick(direction) {
    if (direction === "left") {
      this.setState(
        {
          pickedDate: moment(this.state.pickedDate.format("yyyy-MM-dd")).add(
            -1,
            "month"
          )
        },
        () =>
          this.props.actions.fetchList(
            this.state.pickedDate.format("yyyy-MM-dd")
          )
      );
    } else {
      this.setState(
        {
          pickedDate: moment(this.state.pickedDate.format("yyyy-MM-dd")).add(
            1,
            "month"
          )
        },
        () =>
          this.props.actions.fetchList(
            this.state.pickedDate.format("yyyy-MM-dd")
          )
      );
    }
  }

  render() {
    const todo = this.props.todo;
    const list = todo.list || {};
    // console.info(this.state.pickedDate);
    const enableRegular = (list.approvalVO || {}).enableRegular;
    const regularUrl = (list.approvalVO || {}).regularUrl;

    return (
      <div className="todo-list">
        <RangePicker date={this.state.pickedDate} onPick={this.onPick} />
        <div className="todo-list-header">
          <div
            className="todo-list-header-birth"
            onClick={() => {
              const bgColor = replaceSearch({
                dd_nav_bgcolor: "FFFFA800",
                dinghash: encodeURIComponent("/memorialDay?type=birthday")
              });
              openLink(
                `${bgColor}#/memorialDay?type=birthday${this.state.pickedDate
                  ? `&date=${this.state.pickedDate.format("yyyy-MM-dd")}`
                  : ""}`
              );
            }}
          >
            <span>
              {list.birthdayTotalNum === "0" || !list.birthdayTotalNum ? (
                "没有员工生日"
              ) : (
                `${list.birthdayTotalNum}名员工生日`
              )}
            </span>
          </div>
          <div
            className="todo-list-header-annual"
            onClick={() => {
              const bgColor = replaceSearch({
                dd_nav_bgcolor: "FF3296FA",
                dinghash: encodeURIComponent("/memorialDay?type=anniversary")
              });
              openLink(
                `${bgColor}#/memorialDay?type=anniversary${this.state.pickedDate
                  ? `&date=${this.state.pickedDate.format("yyyy-MM-dd")}`
                  : ""}`
              );
            }}
          >
            {list.annualTotalNum === "0" || !list.annualTotalNum ? (
              "没有员工周年庆"
            ) : (
              `${list.annualTotalNum}名员工周年庆`
            )}
          </div>
        </div>

        {showNoResult(list) ? (
          <div>
            <img
              className="todo-list-no-result"
              src="https://gw.alicdn.com/tfs/TB1NcyOaiqAXuNjy1XdXXaYcVXa-69-85.png"
            />
            <div className="todo-list-no-text">暂无待办事项</div>
          </div>
        ) : (
          <div>
            {showCollapse(list.entryTotalNum) && (
              <Collapse
                corpId={list.corpId}
                userId={list.userId}
                date={this.state.pickedDate}
                olist={list.entryEmpList || []}
                title={`本月入职员工${list.entryTotalNum || 0}人`}
                enableRegular={enableRegular}
                regularUrl={regularUrl}
              />
            )}
            {showCollapse(list.regularTotalNum) && (
              <Collapse
                corpId={list.corpId}
                userId={list.userId}
                date={this.state.pickedDate}
                olist={list.regularEmpList || []}
                title={`本月转正员工${list.regularTotalNum || 0}人`}
                enableRegular={enableRegular}
                regularUrl={regularUrl}
              />
            )}

            {showCollapse(list.transferTotalNum) && (
              <Collapse
                corpId={list.corpId}
                userId={list.userId}
                date={this.state.pickedDate}
                olist={list.transferEmpList || []}
                title={`本月调岗员工${list.transferTotalNum || 0}人`}
                enableRegular={enableRegular}
                regularUrl={regularUrl}
              />
            )}


            {!isWangDing() && showCollapse(list.dismissionTotalNum) && (
              <Collapse
                corpId={list.corpId}
                userId={list.userId}
                date={this.state.pickedDate}
                olist={list.dismissionEmpList || []}
                title={`本月离职员工${list.dismissionTotalNum || 0}人`}
                enableRegular={enableRegular}
                regularUrl={regularUrl}
              />
            )}
          </div>
        )}
      </div>
    );
  }
}
export default TodoList;
